<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>主页</title>
    <script src="/js/jquery-3.5.1.js"></script>
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
    <style>

        html {
            filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
            -webkit-filter: grayscale(100%);
        }
        .flex-container {
            display: -webkit-flex;
            display: flex;
            width: 100%;

            background-color: #2674d7;
        }
        .flex-item1 {
            background-color: cornflowerblue;
            width: 500px;
            height: 500px;
            margin: 10px;
        }
        .flex-item2 {
            background-color: cornflowerblue;
            width: 100px;
            height: 100px;
            margin: 10px;
        }

        .flex-item3 {
            background-color: cornflowerblue;
            width: 500px;
            height: 500px;
            margin: 10px;
        }

    </style>

</head>
<body>

<div class="flex-container">
    <div class="flex-item1" id="flex-item1">
        <h2>图书借阅榜</h2></br>

        <div class="top-books" id="top-books">

        </div>



    </div>
<!--    <div class="flex-item2">借阅者申请信息模块</div>-->
    <div class="flex-item3">
        <h2>留言模块</h2></br>
        <table border="1" class="table">
            <thead>
            <tr>
                <td>借阅者名</td>
                <td>内容</td>
                <td>时间</td>

            </tr>
            </thead>
            <tbody id="empCell">
            </tbody>

        </table>


    </div>
</div>

</body>
</html>

<script>
    $(document).ready(function() {
        sendMsg()//留言模块
        bookTop()//书籍排行
    })
    function  bookTop(){
        $.post("/books-top.admin",function (text1){
            let data = JSON.parse(text1)
            console.log(data)
            let width = 350;
            let height = 350;
            let svg = d3.select('.top-books').append("svg")
                .attr("width",width)
                .attr("height",height);
            let pie = d3.layout.pie();
            // let pieData = pie(dataset);  //布局转换后数据
            let outerRadius = width / 2;
            let innerRadius = width / 4;
            let arc = d3.svg.arc()  				//弧生成器
                .innerRadius(innerRadius)  //内半径
                .outerRadius(outerRadius);  //外半径
            let color = d3.scale.category10();

            // var arcs = svg.selectAll('g.arc')
            //     .data(pie(data.map(function(d) { return d.value; })))
            //     .enter().append('g')
            //     .attr('transform', 'translate(70, 70)')
            //     .attr('class', function(d,i) { return data[i].name; };

            let arcs = svg.selectAll("g")
                .data(pie(data.map(function(d) { return d.bookSales; })))  //绑定布局转换后数据
                .enter()
                .append("g")
                .attr("transform","translate("+outerRadius+","+outerRadius+")")//移到圆心位置
                .attr('class', function(d,i) { return data[i].bookName; })
            arcs.append("path")
                .attr("fill",function(d,i){
                    return color(i);
                })
                .attr("d",function(d){
                    return arc(d);
                });
            //中心添加文本
            arcs.append("text")
                .attr("transform",function(d){
                    return "translate(" + arc.centroid(d) + ")";  //平移到圆弧的中心
                })
                .attr("text-anchor","middle")                //对齐方式为中部局中
                .text(function(d,i){ return data[i].bookName; });
            console.log(dataset);  //原始数据
            // console.log(pieData);  //布局转换后数据





        })
    }
    function sendMsg(){
        $.post("/user-msg.admin",function (text){

            let borObj = JSON.parse(text)
            // console.log(text)
            let tbodyObj = document.getElementById("empCell");

            for(let i=0;i<borObj.length;i++) {
                let trObj = document.createElement("tr");
                for (let attr in borObj[i]) {//遍历js对象,attr代码属性名,我们可以根据属性名获得对象的属性值
                    // console.log("属性名:", attr, "属性值:", borObj[i][attr]);
                    let tdObj = document.createElement("td");
                    tdObj.innerHTML = borObj[i][attr];//将对象的属性值做为td的文本内容
                    trObj.appendChild(tdObj);//把td放到tr对象中。
                    tbodyObj.appendChild(trObj)
                }
            }


        })
    }

</script>